<template>
	<view class="">
		<!-- <NavBar :title="Data.title"></NavBar> -->
		<view class="TenderDetails tn-padding-sm">
			<view
				class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm tn-padding-left-sm tn-padding-right-sm">
				<text class="tn-text-ellipsis">地址：{{Data.address}}</text>
				<text>{{Data.juli}}KM</text>
			</view>
			<view
				class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm tn-padding-left-sm tn-padding-right-sm">
				<text>团长：{{Data.name}}</text>
				<text>联系电话：{{Data.phone}}</text>
			</view>
			<view
				class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm tn-padding-left-sm tn-padding-right-sm">
				<text>报名截止：{{Data.baotime}}</text>
				<text>剩余名额（{{10-Data.number}}）</text>
			</view>
			<view class="detailTable tn-margin-bottom-sm">
				<view class="tn-flex">
					<view class="tn-flex-3 tn-flex tn-flex-direction-column">
						<view class="tn-flex-1 tn-flex" style="height: 50rpx;">
							<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center bor">
								<text>名称</text>
							</view>
							<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center bor">
								<text>数量</text>
							</view>
							<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center bor">
								<text>总预算</text>
							</view>
						</view>
					</view>
					<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center bor">
						<text>参与数</text>
					</view>
					<view class="tn-flex-2 tn-flex tn-flex-row-center tn-flex-col-center bor">
						<text>质押佣金</text>
					</view>
				</view>
				<view class="tn-flex">
					<view class="tn-flex-3 tn-flex tn-flex-direction-column">
						<view class="tn-flex-1 tn-flex" style="height: 50rpx;" v-for="v in Data.product" :key="v.id">
							<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center tn-text-ellipsis bor">
								<text class="tn-text-ellipsis">{{v.pro_name||''}}</text>
							</view>
							<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center tn-text-ellipsis bor">
								<text class="tn-text-ellipsis">{{v.pro_number||0}}</text>
							</view>
							<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center tn-text-ellipsis bor">
								<text class="tn-text-ellipsis">{{v.totle||0}}</text>
							</view>
						</view>
					</view>
					<view class="tn-flex-1 tn-flex tn-flex-row-center tn-flex-col-center tn-text-ellipsis bor">
						<text class="tn-text-ellipsis">{{Data.counts}}</text>
					</view>
					<view class="tn-flex-2 tn-flex tn-flex-row-center tn-flex-col-center tn-text-ellipsis bor">
						<text>{{Data.yongjin||0}}({{Data.dengji||0}}级)</text>
					</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-direction-column tn-text-xs tn-margin-bottom">
				<text>报名未截止-质押佣金显示最高级</text>
				<text>佣金状态：（待选中/被选中/未选中）未被团长选中对接“质押佣金”原路退还、 （商家根据名称和收货地址各自甄别信息是否参与质押佣金）</text>
			</view>
			<view class="tn-flex tn-flex-row-center tn-flex-col-center" style="height: 120rpx;">
				<tn-button shape="round" backgroundColor="#ff1313" fontSize="32" width="350rpx" height="80rpx"
					fontColor="tn-color-white" @click="ok" :disabled="Data.status!=null">{{statusText}}
				</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
	// import NavBar from '../../components/NavBar/NavBar.vue'
	import {
		zhaoDetailApi,
		addTouApi,
		wxpayApi
	} from '../../apis/TenderDetailsApi.js';
	import {
		useToTel
	} from '../../utlis/hook.js';
	export default {
		components: {
			// NavBar
		},
		data() {
			return {
				Data: {},
				// totalCount: 0,
				moneyCount: 1,
				statusText: '参与投标',
				j_id: 0
			};
		},
		onLoad(props) {
			this.j_id = props.id;
			zhaoDetailApi(props.id).then(res => {
				console.log(res)
				if (res.data.msg == '成功') {
					if (res.data.data.status != 1) {
						res.data.data.phone = useToTel(res.data.data.phone)
					}
					this.Data = res.data.data;
					this.moneyCount = res.data.data.yongjin;
					// let _num = 0;
					// res.data.data.product.forEach(v => {
					// 	_num += v.count;
					// })
					uni.setNavigationBarTitle({
						title: res.data.data.title
					});
					switch (res.data.data.status) {
						case 0:
							this.statusText = "待对接"
							break;
						case 1:
							this.statusText = "对接中"
							break;
						case 2:
							this.statusText = "未选中"
							break;
					}
					// this.totalCount = _num;
				}
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			ok() {
				let thsi = this;
				this.wxPay((result) => {
					// console.log(result)
					let _data = {
						j_id: thsi.Data.product[0].j_id,
						u_id: uni.getStorageSync('user').u_id,
						out_trade_no: result.data.data.out_trade_no
					}
					addTouApi(_data).then(res => {
						if (res.data.msg == '成功') {
							uni.navigateTo({
								url: `/pages/Statistics/Statistics?id=${thsi.j_id}`
							})
						}
					}).catch(err => {
						console.log(err)
					})
				});
			},
			wxPay(fun) {
				uni.getProvider({
					service: 'payment',
					success: resu => {
						if (resu.provider.indexOf('wxpay') != -1) { //先判断用户是否有微信支付环境（是否安装了微信app）
							// uni.showLoading({
							// 	title: '正在调起微信支付'
							// })
							let _data = {
								price: this.moneyCount,
								openid: uni.getStorageSync('user').openid
							}
							wxpayApi(_data).then(res => {
								if (res.data.code == 200) {
									uni.requestPayment({
										provider: 'wxpay',
										appid: res.data.data.appid,
										timeStamp: res.data.data.timeStamp.toString(),
										nonceStr: res.data.data.nonceStr,
										package: res.data.data.package,
										signType: res.data.data.signType,
										paySign: res.data.data.paySign, //微信订单数据（Object类型）
										success: result => {
											fun && fun(res);
											// uni.hideLoading();
											uni.showToast({
												title: '支付成功',
												icon: 'success'
											})
										},
										fail: err => {
											// uni.hideLoading();
											uni.showToast({
												title: '支付失败，请稍后再试',
												icon: 'error'
											})
										}
									});
								}
							}).catch(err => {
								// uni.hideLoading();
								uni.showToast({
									title: '服务器开小差了呢，请您稍后再试',
									icon: 'error'
								})
							})
						} else {
							uni.showToast({
								title: '获取微信通道失败，请检查您的微信是否正常启用',
								icon: 'error'
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.TenderDetails {
		width: 750rpx;
		border-radius: 20rpx;
		// border: 1px solid #c1c1c1;
		// background-color: #f7f7f7;

		.detailTable {
			background-color: #fff;
		}

		.bor {
			border: .5rpx solid #b4b4b4;
		}
	}
</style>
